<template>
	<view class="content" :style="{background:$store.state.bgPrimaryColor}">
		<view class="Box">
			<view class="BoxView">
				<view class="BoxOne">
					<u--image :showLoading="true" :src="info.avatar" width="138rpx" height="138rpx" radius="0"
						shape="circle"></u--image>
					<view class="BoxContent">
						<view class="BoxTop marginBottom">
							<text class="title">{{info.username || ''}}</text>
							<!-- <view>普通推广员</view> -->
						</view>
						<view class="BoxTop">
							<view class="rightView">
								<text class="Newtitle">{{info.promotion_level == 1 ? '普通推广员' : '专业推广员'}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="userinfoBody">
			<view class="money_Flex">
				<view>
					<text class="title">可提现金额（元）</text>
					<text class="money">{{info.money || '0.00'}}</text>
				</view>
				<button class="Withdrawal" @click="linkUrl('/pages/Mine/Withdrawal')"
					:style="{'background':$store.state.buttonColor}">提现</button>
			</view>
			<view class="info_Flex">
				<view>
					<text class="title">累计订单</text>
					<text class="num">{{obje.arr_order_count || 0}}</text>
				</view>
				<view>
					<text class="title">累计客户</text>
					<text class="num">{{obje.arr_user_count || 0}}</text>
				</view>
				<view>
					<text class="title">下级推广员</text>
					<text class="num">{{obje.p_user_count || 0}}</text>
				</view>
			</view>
			<button class="qrcode" @click="generate" :style="{'background':$store.state.buttonColor}">生成推广二维码</button>
		</view>
		<view class="headerTitle">
			<view class="headerLeft">
				<view :style="{backgroundColor:$store.state.primaryColor}"></view>
				<text>推广活动</text>
			</view>
			<u--image :showLoading="true" src="../../../static/more.png" width="28rpx" height="28rpx"
				radius="0"></u--image>
		</view>
		<view class="courseBody">
			<view v-for="(item,index) in lists" :key="index" class="item_View">
				<u--image :showLoading="true" :src="item.image" width="166rpx" height="231.17rpx"
					radius="10"></u--image>
				<view class="courseRight">
					<text class="title">{{ item.name || '' }}</text>
					<text class="money" :style="{color:$store.state.primaryColor}">￥{{ item.salesprice || '' }}</text>
					<view class="view">
						<u--image :showLoading="true" src="../../../static/Mine/yhj.png" width="28rpx" height="28rpx"
							radius="0"></u--image>
						<text>直接推广佣金 ¥{{item.promotion_money || ''}}</text>
					</view>
					<view class="view">
						<u--image :showLoading="true" src="../../../static/Mine/yhj.png" width="28rpx" height="28rpx"
							radius="0"></u--image>
						<text>间接推广佣金 ¥{{item.indirect_promotion_money || ''}}</text>
					</view>
					<button :style="{'background':$store.state.buttonColor}" @click="generate">推广</button>
				</view>
			</view>
		</view>
		<u-popup :show="iSshow" @close="iSshow = false" @open="iSshow = true" mode="bottom" :closeable="false"
			:round="50">
			<view class="popupBody">
				<view class="headersBody">
					<u-icon name="close" color="#ebf7ff" size="20"></u-icon>
					<text>推广二维码</text>
					<u-icon name="close" color="#888888" size="20" @click="iSshow = false"></u-icon>
				</view>
				<view class="qrcode">
					<image id="qrcode" :src="qrUrl" style="width: 200px; height: 200px"></image>
				</view>
				<view class="buttonFlex">
					<button class="leftButton" :style="{'background':$store.state.buttonColor}"
						@click="copy">复制链接</button>
					<button class="rightButton" :style="{'background':$store.state.buttonColor}"
						@click="save_img">长按保存</button>
				</view>
			</view>
		</u-popup>
		<canvas id="qrcode" canvas-id="qrcode" style="width: 200px !important; height: 200px !important;position: absolute;
		left: -9999px;
		 z-index: -999;"></canvas>
	</view>
</template>
<script>
	import UQRCode from '../../../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
	import {
		getUserShareCount,
		userinfo
	} from '../../../api/Mine.js';
	import {
		getList
	} from '../../../api/Home.js';
	export default {
		data() {
			return {
				iSshow: false,
				info: {},
				obje: {},
				lists: [],
				qrUrl: ''
			}
		},
		onLoad() {
			this.userinfo();
			this.getList();
			this.getUserShareCount();
		},
		onReady() {
			// this.generate()
		},
		methods: {
			async getList() {
				try {
					const res = await getList({
						shop_id: uni.getStorageSync('shop_id'),
						is_activity: 1
					});
					this.lists = [...res.data];
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			async getUserShareCount() {
				try {
					const res = await getUserShareCount();
					this.obje = res.data;
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			linkUrl(e) {
				uni.navigateTo({
					url: e
				});
			},
			generate() {
				var qr = new UQRCode();
				qr.data =
					`https://yuekewap.worldtalker.cn/#/pages/Tabbar/Home/Home?invitation_code=${this.info.invitation_code}&shop_id=${uni.getStorageSync('shop_id')}`;
				qr.size = 200;
				qr.make();
				var canvasContext = uni.createCanvasContext('qrcode', this);
				qr.canvasContext = canvasContext;
				qr.drawCanvas();
				this.saveQRCodeImage();
			},
			saveQRCodeImage() {
				const th_is = this;
				const canvasId = 'qrcode'; // Canvas ID，与UQRCode绑定的Canvas ID保持一致
				uni.canvasToTempFilePath({
					canvasId: canvasId,
					success: (res) => {
						console.log('二维码图片临时文件路径:', res.tempFilePath);
						let base64Data = res.tempFilePath.replace(/[\r\n]/g, '');
						th_is.qrUrl = base64Data;
						th_is.iSshow = true;
						console.log(base64Data);
					},
					fail: (error) => {
						console.error('获取二维码图片失败:', error);
						uni.showToast({
							title: '获取二维码失败',
							icon: 'none'
						});
					}
				});
			},
			copy() {
				uni.setClipboardData({
					data: `https://yuekewap.worldtalker.cn/#/pages/Tabbar/Home/Home?invitation_code=${this.info.invitation_code}&shop_id=${uni.getStorageSync('shop_id')}`,
					success: function() {
						uni.showToast({
							title: '复制成功！',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			/**
			@method 老师详情
			**/
			async userinfo() {
				try {
					const res = await userinfo();
					this.info = res.data.userinfo;
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
		}
	}
</script>
<style scoped lang="scss">
	button::after {
		border: none;
	}

	.content {
		/deep/ .u-safe-bottom {
			display: none;
		}

		.Box {
			.BoxView {
				width: 85%;
				margin: 0px auto;
				// background-color: transparent;
				border-radius: 20rpx;
				padding: 20rpx 30rpx 30rpx 30rpx;
				margin-top: 20rpx;

				.time {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #888888;
					display: block;
					margin-bottom: 20rpx;
				}
			}

			.BoxOne {
				display: flex;
				align-items: center;

				.marginBottom {
					margin-bottom: 10rpx;

					view {
						background-color: #55aaff;
						color: #fff;
						font-size: 24rpx;
						font-weight: 400;
						border-radius: 5rpx;
						padding: 3rpx 10rpx 5rpx 10rpx;
						margin-left: 20rpx;
					}
				}

				.BoxTop {
					margin-left: 15rpx;
					display: flex;
					align-items: center;

					.price {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 28rpx;
						color: #029CFE;
					}

					.rightView {
						display: flex;
						align-items: center;

						/deep/ .u-image {
							margin-left: 80rpx;
						}

						text {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #888888;
						}
					}

					text {
						display: block;
						font-size: 24rpx;
					}

					.title {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 36rpx;
						color: #333333;
						font-style: normal;
					}

					.Newtitle {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #8E8F8E;
						font-style: normal;
					}
				}
			}
		}

		.userinfoBody {
			width: 80%;
			height: auto;
			background-color: #fff;
			border-radius: 30rpx;
			margin: 0px auto;
			padding: 50rpx 50rpx 60rpx 50rpx;

			.money_Flex {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				view {
					text {
						display: block;
					}

					.title {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #202020;
						margin-bottom: 5rpx;
					}

					.money {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 36rpx;
						color: #202020;
					}
				}

				.Withdrawal {
					width: 154rpx;
					height: 55rpx;
					background-color: #2283ff;
					font-size: 26rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					border-radius: 50rpx;
					margin: 0rpx;
				}
			}

			.info_Flex {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 80rpx;

				view {
					text {
						display: block;
						text-align: center;
						margin-top: 10rpx;
					}

					.title {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #202020;
					}

					.num {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 36rpx;
						color: #202020;
					}
				}
			}

			.qrcode {
				width: 100%;
				height: 70rpx;
				// background: linear-gradient( 270deg, #3078FF 0%, #009DFE 100%);
				border-radius: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 32rpx;
				margin-top: 40rpx;
				letter-spacing: 2rpx;
			}
		}

		.headerTitle {
			width: 90%;
			margin: 0px auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 50rpx;

			.headerLeft {
				display: flex;
				align-items: center;

				view {
					width: 10rpx;
					height: 34rpx;
					background: #029CFE;
					border-radius: 6rpx;
				}

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 36rpx;
					color: #333333;
					margin-left: 15rpx;
				}
			}
		}

		.courseBody {
			width: 90%;
			margin: 0px auto;

			.item_View {
				display: flex;
				margin-top: 30rpx;
				background-color: #fff;
				border-radius: 30rpx;
				padding: 30rpx;

				.courseRight {
					margin-left: 15rpx;

					.title {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 28rpx;
						color: #333333;
					}

					.money {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 28rpx;
						color: #029CFE;
						display: block;
						margin-top: 5rpx;
						margin-bottom: 10rpx;
					}

					.view {
						display: flex;
						align-items: center;

						text {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #888888;
							margin-left: 10rpx;
						}
					}

					button {
						width: 246rpx;
						height: 54rpx;
						// background: linear-gradient( 270deg, #3078FF 0%, #009DFE 100%);
						border-radius: 50rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						margin: 0px;
						font-size: 29rpx;
						letter-spacing: 2rpx;
						margin-top: 20rpx;
					}
				}
			}
		}

		.popupBody {
			.headersBody {
				display: flex;
				justify-content: space-between;
				background-color: #E6F8FF;
				padding: 30rpx;
				border-top-left-radius: 30rpx;
				border-top-right-radius: 30rpx;

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #202020;
				}
			}

			.qrcode {
				width: auto;
				height: auto;
				display: flex;
				justify-content: center;
				margin: 0px auto;
				margin-top: 40rpx;
			}

			.buttonFlex {
				margin-top: 50rpx;
				margin-bottom: 50rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.leftButton {
					width: 40%;
					height: 75rpx;
					margin: 0px;
					background-color: #efefef;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50rpx;
					font-size: 28rpx;
					letter-spacing: 2rpx;
				}

				.rightButton {
					width: 40%;
					height: 75rpx;
					margin: 0px;
					background-color: #277ffe;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50rpx;
					font-size: 28rpx;
					letter-spacing: 2rpx;
				}
			}
		}
	}
</style>